<template>
  <div class="root">
    <wux-spin nested :spinning="spining">
      <div class="title">{{travel.title}}</div>
      <div class="head">
        <div class="source">{{travel.source}}</div>
        <div class="date">{{travel.publishTime}}</div>
      </div>
      <div class="content" v-html="travel.content"></div>
    </wux-spin>
  </div>
</template>
<script>
import travelApi from "@/api/travel";

export default {
  data() {
    return {
      spining: false,
      travel: {
        title: "",
        source: "",
        publishTime: "",
        content: "",
      },
    };
  },
  mounted() {
    this.getTravel();
  },
  methods: {
    getTravel() {
      const self = this;
      let id = this.$store.state.travelId;
      if (id !== undefined) {
        this.spining = true;
        this.$http
          .post({
            url: travelApi.getTravel,
            method: "POST",
            body: {
              id: id,
            },
          })
          .then((res) => {
            self.spining = false;
            res.publishTime = this.getYearMonth(res.publishTime);
            self.travel = res;
          })
          .then((res) => {
            self.spining = false;
          });
      }
    },
    getYearMonth(date) {
      // 将日期以空格隔开，即['2020-06-13', '17:10:09']
      date = (date + "").split(/[ ]+/);
      let result = [];
      let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
      // 用截取出来的年月日进行正则表达式匹配
      reg.exec(date[0]);
      result.push(RegExp.$1); //获取匹配到的第一个子匹配，即‘2020’
      result.push(RegExp.$2);
      result.push(RegExp.$3);
      return result.join("-");
    },
  },
};
</script>
<style scoped lang="less">
.root {
  padding: 20px;
  .title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: justify;
    text-justify: newspaper;
    word-break: break-all;
  }
  .head {
    margin-bottom: 15px;
    .source {
      display: inline-block;
      margin-right: 10px;
      font-size: 15px;
      color: #257ee4;
    }
    .date {
      display: inline-block;
      color: #c1c1c1;
      font-size: 14px;
    }
  }
}
</style>